<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问内容</title>
    <script>
        function f1(){
            let d1 = document.getElementById("d1");
            // 获取指定节点标签体的内容
            // innerHTML:识别标签
            // 取值
            console.log("innerHTML:"+d1.innerHTML);
            // 赋值
            // 能识别标签,页面中显示h1的效果
            d1.innerHTML = "<h1>我赋值了</h1>";
        }
        function f2(){
            let d2 = document.getElementById("d2");
            // 获取指定节点标签体的内容
            // innerText:不识别标签
            console.log("innerText:"+d1.innerText);
            // 赋值
            // 不识别标签,页面中将h1作为普通字符串显示
            d2.innerText = "<h1>我赋值了</h1>";
        }
    </script>
</head>
<body>
<div id="d1" onclick="f1()">
    <h1>这是一个div</h1>
</div>
<div id="d2" onclick="f2()">
    <h1>这是一个div</h1>
</div>
</body>
</html>